<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { PerfumerBottle, Plus, Reel } from '@icon-park/vue-next'
import useProj from '@renderer/composables/useProj'
import { ref } from 'vue'

const search = ref('')
const activeId = ref(1)
const { all, projs } = useProj()

all()
</script>

<template>
  <main>
    <div class="search">
      <el-input v-model="search" placeholder="搜索..." clearable :suffix-icon="Search" @input="" />
      <el-button type="primary" @click="">
        <Plus theme="outline" size="18" fill="#fff" />
      </el-button>
    </div>
    <div class="projList">
      <div v-for="proj in projs" :key="proj.id" class="proj">
        <RouterLink
          :to="{ name: 'proj', params: { id: proj.id } }"
          @click="activeId = proj.id!"
          :class="{ active: proj.id === activeId }"
        >
          <PerfumerBottle theme="outline" size="18" v-if="proj.id !== activeId" />
          <Reel theme="outline" size="18" v-if="proj.id === activeId" />
          <div>
            {{ proj.shortName }}
          </div>
        </RouterLink>
      </div>
    </div>
    <div class="content">
      <RouterView />
    </div>
  </main>
</template>

<style lang="scss" scoped>
main {
  @apply w-full h-full bg-slate-200;
  display: grid;
  grid-template:
    'search content' 50px
    'projList content' auto/190px 1fr;
  .search {
    @apply flex items-center px-2 py-1 gap-1;
  }
  .projList {
    @apply border-r border-b;
    .proj {
      @apply text-sm px-2 cursor-pointer;
      & > a {
        @apply px-3 py-2 flex items-center gap-2;
        &:hover {
          @apply bg-slate-300 rounded-md;
        }
        &.active {
          @apply bg-slate-400 text-white rounded-md;
        }
      }
    }
  }
  .content {
    grid-area: content;
  }
}
</style>
